<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }
        
        .hr {
            width: 90%;
            height: 3px;
            background-color: red;
            margin: 50px auto;
        }
        
        .zhuCe {
            width: 90%;
            height: 800px;
            border: 1px solid gray;
            margin: 0 auto
        }
        
        .head {
            width: 100%;
            height: 40px;
            background-color: rgba(128, 128, 128, 0.397);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .head span {
            margin: 0 20px;
        }
        
        ul li {
            width: 500px;
            height: 40px;
            /* border: 1px solid gray; */
            display: flex;
            margin: 30px auto;
        }
        
        ul li div {
            width: 90px;
            height: 100%;
            /* border: 1px solid gray; */
            display: flex;
            justify-content: flex-end;
        }
        
        ul li div p {
            height: 100%;
            line-height: 40px;
        }
        
        ul li input {
            margin-left: 10px;
            width: 200px;
            font-size: 16px;
            border-radius: 8px;
            border: 1px solid gray;
        }
        
        ul li span {
            margin-left: 10px;
            height: 100%;
            line-height: 40px;
        }
        
        .cuoWu {
            color: red;
        }
        
        .right {
            color: green;
        }
    </style>
</head>

<body>
    <div class="hr"></div>
    <div class="zhuCe">
        <div class="head">
            <span>注册新用户</span>
            <span>我有账号,去<a href="" style="color: red;">登录</a></span>
        </div>
        <ul>
            <li>
                <div>
                    <p>手机号:</p>
                </div>
                <input type="text" id="tel">
                <span class=""></span>
            </li>
            <li>
                <div>
                    <p>QQ:</p>
                </div>
                <input type="text">
                <span></span>
            </li>
            <li>
                <div>
                    <p>昵称:</p>
                </div>
                <input type="text" placeholder="请输入你的用户名">
                <span></span>
            </li>
            <li>
                <div>
                    <p>短信验证码:</p>
                </div>
                <input type="text">
                <span class="right"></span>
            </li>
            <li>
                <div>
                    <p>登陆密码:</p>
                </div>
                <input type="password" id="pwd">
                <span class=""></span>
            </li>
            <li>
                <div>
                    <p>确认密码:</p>
                </div>
                <input type="password" id="qwd">
                <span class=""></span>
            </li>
        </ul>
    </div>
    <script>
        window.onload = function() {
            var regtel = /^1[3|4|5|6|7|8]\d{9}$/; //手机号的正则表达式
            var regpwd = /^[a-zA-Z0-9_-]{6,16}$/; //密码正则表达式

            var pwd = document.querySelector('#pwd');
            var tel = document.querySelector('#tel');
            var qwd = document.querySelector('#qwd');
            regexp(tel, regtel); //手机号判断
            regexp(pwd, regpwd); //密码判断

            //封装一个判断函数
            function regexp(ele, reg) {
                ele.onblur = function() {
                    if (reg.test(this.value)) {
                        // console.log('正确的');
                        this.nextElementSibling.className = 'right';
                        this.nextElementSibling.innerHTML = '恭喜输入正确'
                    } else if (this.value == '') {
                        this.nextElementSibling.className = '';
                        this.nextElementSibling.innerHTML = '请输入内容'
                    } else {
                        this.nextElementSibling.className = 'cuoWu';
                        this.nextElementSibling.innerHTML = '输入错误'
                    }
                }
            };
            qwd.onblur = function() {
                if (this.value == pwd.value) {
                    this.nextElementSibling.className = 'right';
                    this.nextElementSibling.innerHTML = '恭喜输入正确'
                } else {
                    this.nextElementSibling.className = 'cuoWu';
                    this.nextElementSibling.innerHTML = '不相同'
                }
            }
        }
    </script>
</body>

</html>